<div *ngIf="filterFunc" class="ui grid">
    <div class="ui row">
        <div class="ui wide column">
            <div class="ui fluid input">
                <input type="text" placeholder="{{ 'filter' | translate }}" [(ngModel)]="filter"
                    (keyup)="filterChange()">
            </div>
        </div>
    </div>
</div>
<table class="ui striped fixed table" [class.selectable]="withLineClick">
    <thead>
        <tr>
            <th *ngIf="withSelect" class="wide one">
                <div class="ui checked checkbox">
                    <input type="checkbox" [ngModel]="selectedAll" (ngModelChange)="onSelectAllChange($event)">
                    <label></label>
                </div>
            </th>
            <ng-container *ngFor="let c of columns">
                <th *ngIf="!c.disabled" class="wide {{c.class}}" [class.sortable]="c.sortable && c !== sortedColumn"
                    [class.ascending]="c === sortedColumn && sortedColumnDirection === 'asc'"
                    [class.descending]="c === sortedColumn && sortedColumnDirection === 'desc'"
                    (click)="columnClick($event, c)">
                    {{ c.name | translate }}
                </th>
            </ng-container>
        </tr>
    </thead>
    <tbody *ngIf="loading">
        <tr>
            <td class="center aligned" [colSpan]="columnsCount">
                <div class="ui active small inline loader"></div>
                <div>{{ 'common_loading' | translate }}</div>
            </td>
        </tr>
    </tbody>
    <tbody *ngIf="!loading && dataForCurrentPage.length === 0">
        <tr>
            <td class="center" [colSpan]="columnsCount">
                <div>{{ 'common_no_data' | translate }}</div>
            </td>
        </tr>
    </tbody>
    <tbody *ngIf="!loading && dataForCurrentPage.length > 0">
        <tr *ngFor="let d of dataForCurrentPage; let i = index" (click)="lineClick(i, d)"
            [class.pointing]="withLineClick" [class.active]="withLineClick && indexSelected === i">
            <td *ngIf="withSelect" class="wide one">
                <div class="ui checked checkbox">
                    <input type="checkbox" [ngModel]="selected[d.key()]"
                        (ngModelChange)="onSelectChange($event, d.key())">
                    <label></label>
                </div>
            </td>
            <ng-container *ngFor="let c of (columns | selector:d)">
                <td *ngIf="!c.disabled" [ngSwitch]="c.type" class="wide {{c.class}}">
                    <i *ngSwitchCase="'icon'" [ngClass]="c.selector"></i>
                    <a *ngSwitchCase="'router-link'" class="ui" [routerLink]="c.selector.link">
                        {{c.selector.value}}
                    </a>
                    <a *ngSwitchCase="'link-click'" class="ui pointing" (click)="c.selector.callback()">
                        {{c.selector.value}}
                    </a>
                    <a *ngSwitchCase="'link'" class="ui pointing" [href]="c.selector.link" target="_blank">
                        {{c.selector.value}}
                    </a>
                    <markdown *ngSwitchCase="'markdown'" [data]="c.selector"></markdown>
                    <ng-container *ngSwitchCase="'date'"> {{c.selector | amCalendar}} </ng-container>
                    <button class="ui primary button small" *ngSwitchCase="'button'" (click)="c.selector.click()">{{c.selector.title
                        | translate}}</button>
                    <app-confirm-button *ngSwitchCase="'confirm-button'" [class]="'small'" (event)="c.selector.click()"
                        [title]="c.selector.title">
                    </app-confirm-button>
                    <span class="ui label {{c.selector.class}}" *ngSwitchCase="'label'">{{c.selector.value |
                        translate}}</span>
                    <ng-container *ngSwitchCase="'router-link-with-icons'">
                        <a class="ui" [routerLink]="c.selector.link">{{c.selector.value}}</a>
                        <span *ngFor="let i of c.selector.icons" suiPopup [popupText]="i.label | translate">
                            {{' '}}<i [ngClass]="i.class" title="{{i.title | translate }}"></i>
                        </span>
                    </ng-container>
                    <div *ngSwitchCase="'text-copy'" class="ui fluid action input">
                        <input type="text" value="{{c.selector}}">
                        <button class="ui icon button copyButton" [title]="'common_copy_clipboard' | translate"
                            ngxClipboard [cbContent]="c.selector">
                            <i class="copy icon"></i>
                        </button>
                    </div>
                    <ng-container *ngSwitchDefault>
                        <ng-container *ngIf="c.selector && c.translate">
                            {{c.selector | translate}}
                        </ng-container>
                        <ng-container *ngIf="c.selector && !c.translate">
                            {{c.selector}}
                        </ng-container>
                    </ng-container>
                </td>
            </ng-container>
        </tr>
    </tbody>
    <tfoot tfoot *ngIf="nbElementsByPage && pagesCount > 1">
        <tr>
            <td [colSpan]="columnsCount">
                <sui-pagination class="ui right floated" [collectionSize]="filteredData.length"
                    [pageSize]="nbElementsByPage" [maxSize]="20" [hasEllipses]="true" (pageChange)="pageChange($event)"
                    [page]="currentPage">
                </sui-pagination>
            </td>
        </tr>
    </tfoot>
</table>
